<template>
  <div class="repositoryContainer">
    <el-card>
      <el-row>
        <el-col :span="6">
          <!-- 搜索 -->
          <el-input
            placeholder="请输入内容"
            v-model="search"
            clearable
            @change="searchClick"
            @clear="clearClick"
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="searchClick"
            >仓位搜索</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteAllDialog"
            >批量删除</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-button type="" icon="el-icon-plus" @click="addAllDialog"
            >批量添加</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row :gutter="10">
        <!-- 表格 -->
        <el-table
          :data="depositoryExpressInformation"
          style="width: 100%"
          ref="table"
          v-loading="loading"
        >
          <!-- 多选 -->
          <el-table-column type="selection"></el-table-column>
          <!-- <el-table-column
            type="index"
            width="80"
            label="序号"
          ></el-table-column> -->
          <el-table-column prop="locationName" label="仓位名" width="200">
          </el-table-column>
          <el-table-column prop="locationStorage" label="仓位是否被占用">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.locationStorage == '1'"
                >已占用</el-tag
              >
              <el-tag type="info" v-else>未使用</el-tag>
            </template>
          </el-table-column>
          <!-- 操作区 -->
          <el-table-column label="操作">
            <!-- 插槽 slot-scope="scope" -->
            <template slot-scope="scope">
              <el-button type="" size="small" @click="editCondition(scope)"
                >修改占用状态</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteConfirm(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <!-- 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
       -->
      <el-row :gutter="10">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[8, 16, 24, 32]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(totalNumber)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 对话框组件 -->
    <el-dialog title="批量删除" :visible.sync="dialogVisible" width="30%">
      <el-tabs v-model="activeName">
        <el-tab-pane label="仓位尾部删除" name="first">
          <!-- Form表单区域 -->
          <el-form label-width="100px">
            <!-- 删除方式1 -->
            <el-form-item label="待删除仓位数">
              <el-input-number
                v-model="formDeleteNumber"
                :min="1"
                :max="totalNumber"
              ></el-input-number>
            </el-form-item>
            <el-button
              type="primary"
              @click="numberDelete"
              style="margin-left: 460px"
              >删 除</el-button
            >
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="仓位选中项删除" name="second">
          <!-- 删除方式2 -->
          <el-button type="danger" @click="batchDelete"
            >仓位选中项删除</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 侧窗组件 -->
    <el-drawer
      title="批量增加"
      :visible.sync="drawerVisible"
      :with-header="true"
    >
      <el-tabs @tab-click="handleAddTabClick" v-model="activeName">
        <el-tab-pane label="起始-末尾增加" name="first">
          <!-- Form表单区域 -->
          <el-form
            :model="formAdd"
            label-width="100px"
            :rules="rules"
            ref="addForm"
          >
            <!-- 新增方式1 -->
            <el-form-item label="该仓位起" prop="startLocation">
              <el-input v-model="formAdd.startLocation"></el-input>
            </el-form-item>
            <el-form-item label="该仓位结束" prop="endLocation">
              <el-input v-model="formAdd.endLocation"></el-input>
            </el-form-item>
            <el-button type="primary" @click="confirmAdd1">确认新增</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="单个新增" name="second">
          <!-- 新增方式2 -->
          <el-form label-width="100px">
            <el-form-item label="新增仓位个数">
              <el-input-number
                v-model="addLocationNumber"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <el-button type="primary" @click="confirmAdd2">确认新增</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Repository",
  data() {
    return {
      // 加载
      loading: false,
      // 当前页
      currentPage: "",
      // 一页显示条数
      pageSize: "",
      // 记录数
      totalNumber: "",
      search: "",
      // Tab新增默认活动页
      activeName: "first",
      // 新增仓位数量
      addLocationNumber: "",
      // 批量新增仓位数量
      formAdd: {
        startLocation: "",
        endLocation: "",
      },
      formDeleteNumber: "",
      // 库存信息
      depositoryExpressInformation: [],
      // 批量删除信息
      searchDeleteStart: "",
      // 对话框信息
      dialogVisible: false,
      drawerVisible: false,
      // 表单校验
      rules: {
        startLocation: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            pattern: /[1-9]+[0-9]?[0-9]?-([1-9]+[0-9]?)/,
            message: "请按照 1-1、2-20等格式填写",
          },
        ],
        endLocation: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            pattern: /[1-9]+[0-9]?[0-9]?-([1-9]+[0-9]?)/,
            message: "请按照 1-1、2-20等格式填写",
          },
        ],
      },
    };
  },
  created() {
    // 初始化页码和搜索内容
    this.currentPage = 1;
    this.pageSize = 8;
    this.search = "";
    this.getRepositoryData(this.currentPage, this.pageSize, this.search);
  },
  methods: {
    // 获取仓库库位信息
    async getRepositoryData(currentPage, pageSize, search) {
      this.depositoryExpressInformation = [];
      this.loading = true;
      // 发请求获取数据
      const { data: res } = await axios({
        method: "GET",
        url: `/api/depository/getDepositoryData/${currentPage}/${pageSize}`,
        params: {
          query: search,
        },
      });
      this.searchNumber = res.data.list.length;
      if (res.code == 200) {
        // 赋值到数据模型
        for (let i = 0; i < res.data.list.length; i++) {
          var item = {};
          item.locationId = res.data.list[i].locationId;
          item.locationName = res.data.list[i].locationName;
          item.locationStorage = res.data.list[i].locationStorage;
          this.depositoryExpressInformation.push(item);
        }
        // 更新页码
        this.currentPage = res.data.pageNum;
        this.totalNumber = res.data.total;
        this.pageSize = res.data.pageSize;
      } else {
        this.searchNumber = -1;
        this.$message.error("服务器错误，请稍后重试！");
      }
      this.loading = false;
    },
    // 搜索框清空点击
    clearClick() {
      this.search = "";
    },
    // 一页显示条数改变
    handleSizeChange(e) {
      // 设置一条展示个数
      this.pageSize = e;
      this.currentPage = 1;
      this.getRepositoryData(this.currentPage, this.pageSize, this.search);
    },
    // 处理页码改变
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getRepositoryData(this.currentPage, this.pageSize, this.search);
    },
    // 处理搜索点击
    searchClick() {
      this.getRepositoryData(this.currentPage, this.pageSize, this.search);
    },
    // 修改签收状态
    editCondition(scope) {
      this.$confirm("此操作将修改该仓位的占用状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await axios({
            method: "PUT",
            url: "/api/depository/updateLocationStorage",
            params: {
              locationId: scope.row.locationId,
            },
          });
          if (res.code == 200) {
            this.$message.success("更新状态成功!");
          } else if (res.code == 405) {
            this.$message.warning("仓位存在快递不能更新为不占用状态");
          } else {
            this.$message.error("服务器错误，请稍后重试！");
          }
          this.getRepositoryData(this.currentPage, this.pageSize, this.search);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    // 处理单个删除
    deleteConfirm(scope) {
      this.$confirm("此操作将永久删除该仓位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await axios({
            method: "DELETE",
            url: "/api/depository/removeOne",
            params: {
              locationId: scope.row.locationId,
            },
          });
          if (res.code == 200) {
            this.$message.success("删除成功！");
            this.getRepositoryData(
              this.currentPage,
              this.pageSize,
              this.search
            );
          } else if (res.code == 405) {
            this.$message.warning("仓位存在快递，不能删除！");
          } else {
            this.$message.error("服务器错误，请稍后重试！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 处理删除方法1：起始-末尾删除
    async numberDelete() {
      const { data: res } = await axios({
        method: "DELETE",
        url: "/api/depository/batchDelete1",
        params: {
          deleteNumber: this.formDeleteNumber,
        },
      });
      if (res.code == 200) {
        this.$message.success("批量删除成功");
        this.dialogVisible = false;
        this.getRepositoryData(this.currentPage, this.pageSize, this.search);
      } else if (res.code == 405) {
        this.$message.warning("删除范围存在快递占用情况");
      } else {
        this.$message.error("服务器错误，请稍后再试！");
      }
    },
    // 处理删除方法2：批量删除
    async batchDelete() {
      // 获取选中的数据
      const deleteData = this.$refs.table.selection;
      if (deleteData.length == 0) {
        this.$message.warning("请勾选您要选择删除的数据");
        return;
      }
      // 有选中数据发请求批量删除
      const { data: res } = await axios({
        method: "DELETE",
        url: "/api/depository/batchDelete2",
        data: deleteData,
      });
      if (res.code == 200) {
        this.$message.success("批量删除成功");
        this.dialogVisible = false;
      } else if (res.code == 405) {
        this.$message.warning("存在仓位被快递占用情况请检查！");
        this.dialogVisible = false;
      } else {
        this.$message.error("服务器发生错误，请稍后重试！");
      }
      this.getRepositoryData(this.currentPage, this.pageSize, this.search);
    },
    // 处理方式2新增仓位
    async confirmAdd2() {
      const { data: res } = await axios({
        method: "POST",
        url: "/api/depository/addNumber",
        params: {
          addNumber: this.addLocationNumber,
        },
      });
      if (res.code == 200) {
        this.$message.success("新增仓位成功！");
        this.getRepositoryData(this.currentPage, this.pageSize, this.search);
        // 关闭抽屉
        this.drawerVisible = false;
      } else {
        this.$message.error("服务器错误，请稍后重试！");
      }
    },
    // 处理方式1新增仓位
    confirmAdd1() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          let number1 = this.formAdd.startLocation.split('-')[0];
          let number2 = this.formAdd.endLocation.split('-')[0];
          if (number1 > number2) {
            return this.$message.warning("仓位起始不能小于仓位结束名！");
          }
          const { data: res } = await axios({
            method: "POST",
            url: "/api/depository/addStartEnd",
            data: this.formAdd,
          });
          if (res.code == 200) {
            this.$message.success("批量新增成功");
            this.drawerVisible = false;
            this.getRepositoryData(
              this.currentPage,
              this.pageSize,
              this.search
            );
          } else if (res.code == 407) {
            this.$message.warning("存在已有仓库");
          } else {
            this.$message.error("服务器发生错误，请稍后重试！");
          }
        }else {
          return;
        }
      });
    },
    // 批量删除点击事件
    deleteAllDialog() {
      this.formDeleteNumber = 1;
      this.dialogVisible = true;
    },
    // 批量添加
    addAllDialog() {
      this.addLocationNumber = 1;
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      })
    },
    // Tab新增栏
    handleAddTabClick(event) {
      // 获取是哪个Tag栏操作的
      this.formAdd.startLocation = "";
      this.formAdd.endLocation = "";
      console.log(event.index);
    },
  },
};
</script>

<style>
/* 公共样式修改 */
.repositoryContainer {
  height: 100%;
  padding: 50px;
}
.repositoryContainer .el-card {
  margin-top: 0px;
  margin-right: 0px;
}
/* .repositoryContainer .el-col-2 {
  width: 6.5%;
} */
/* 处理表格间距 */
.repositoryContainer .el-card .el-row:nth-child(2) {
  margin-top: 30px;
}
/* 处理分页间距 */
.repositoryContainer .el-card .el-row:nth-child(3) {
  margin-top: 30px;
}
.repositoryContainer .el-tabs__item.is-active {
  color: #ff84b4;
}
.repositoryContainer .el-tabs__item:hover {
  color: #ff84b4;
}
.repositoryContainer .el-tabs__active-bar {
  background-color: #ff84b4;
}
/* 抽屉的padding */
.repositoryContainer .el-drawer {
  padding: 30px;
}
</style>